Day 06 你的 Javascript 不是你的 Javascript（Webpack 與 Vite 簡介）

2022 iThome 鐵人賽

DAY 6

Modern Web

關於用 Javascript (Typescript) Stack 打造某種 Backend 3D Rendering 的東東這檔事系列第 6 篇

14th鐵人賽 webpack vite bundler loader

Wei Ji

2022-09-20 21:18:42

1197 瀏覽

分享至

Webpack

它為了解決什麼問題而生？

正如我在 Day 03 提過的，在各種執行環境、規格、版本、語法大亂鬥的時代，把開發環境的程式碼與資料轉換成適合佈署到執行環境的格式便是一個常見的需求，Webpack 的存在目的就是為了做好 Web 與 pack 兩件事，更清楚的講是將你的程式打包 (pack) 成網頁 (Web)。

進入它的首頁，這個畫面就會映入我們眼簾：

這個畫面也很好的說明了 Webpack 的功能，左邊我們可以看到 .cjs, .sass 之類的檔案，這些都是瀏覽器無法直接解析的檔案， Webpack 會把它們變成右邊的 .js, .css 這些才是瀏覽器看得懂的檔案。

.cjs: 使用 CommonJS 作為模組化解決方案 Javascript 檔案，作為它的對比的則是 ESM (ES6 Modules)。
.sass: Syntactically Awesome Stylesheets，有兩種檔案格式 .sass 和 .scss，目的是透過巢狀結構來來描述 css 從而減少重複性的撰寫過程。

Loader

雖然本文只會稍微帶過，但是 Loader 的概念即便是使用其他打包工具應該也同樣適用，所以這邊稍微解釋一下幾種 Loader 的行為與功能。

File Loader

當你 import 一個檔案，這個檔案會被 bundler 在打包的時候複製到輸出資料夾，並且可能發生路徑與檔名的變化，舉例來說：

// src/good/food/game.js
import apple from './apple.png'

console.log(apple); // static/assets/01867c31e98cbce33c9.png

你可以把 import 的東西當成路徑使用，或許可以指派給 <img>。

URL Loader

當你 import 一個檔案，這個檔案會被序列化成 base64 ，舉例來說：

// src/good/food/game.js
import apple from './apple.svg'

console.log(apple); // data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIg....

同樣的你也可以把 import 的東西指派給 <img>，只是要注意這些字串會儲存在打包的 js 檔案內，使 js 體積變大，而 js 太肥的話會影響網頁的效能（花太多時間在載入肥大的 js bundle）。

Raw Loader

當你 import 一個檔案，Loader 會直接讀取檔案的內容並當成字串，舉例來說：

apple.txt 的內容如下:

awesome string

import apple from './apple.txt'

console.log(apple); // awesome string.

JSON Loader 其實就是 Raw Loader 之後在幫你做 JSON.parse() 而已。

Style Loader

CSS 的衍生語言有很多種，諸如：

SASS（SCSS）
LESS
Stylus

但是為了給瀏覽器使用最後都會轉換成 CSS，但是 CSS 本身其實有 3 種載入網頁的方式：

External

<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

特性類似前述的 File Loader。

Internal

<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

特性類似前述的 URL Loader。

Inline

<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

特性類似前述的 URL Loader。

Loader 應該會提供一些參數或是界面讓開發者控制這三種輸出結果。

小結

在 bundler 的開發環境下什麼鬼東西都可以當成 module import 進來程式碼使用，但是檔案百百種， Loader 也百百種，要注意自己的環境設定是否符合自己 imprt 進來預期的樣子，不然可能陷入想要讀檔案內容卻只給你一串 URI ；丟進函數 runtime error 的窘境。

Vite

它為了解決什麼問題而生?

在網頁的開發過程，我們通常會使用一種叫做熱更新 (Hot Reload) 的東西，讓我們在編輯程式碼的時候即時刷新網頁來觀察修改結果。

而 Webpack 也支援這個功能，但是它在刷新頁面之前需要把剛剛修改過得東西重新跑一次轉譯，因此當網站越來越大，程式碼越來越多的時候，這個熱更新就顯得慢了起來。Vite 則是直接把程式以 Native ES Modules 方式載入，透過避開 bundling 和轉譯的過程來提高熱更新重載的速度。